<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>与 繁华年间 聊天</title>
  <meta name="description" content="Responsive, Bootstrap, BS4" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  
  <!-- style -->
  <!-- build:css ../assets/css/site.min.css -->
  <link rel="stylesheet" href="../assets/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/i-con.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/style.css" type="text/css" />
  <!-- endbuild -->
</head>
<body class="layout-column" style="background: white;">

  <!-- ############ LAYOUT START-->
  <div id="main" class="layout-row flex">

    <!-- ############ Content START-->
    <div id="content" class="flex ">
      <!-- ############ Main START-->
      <div class="padding-0">
        <div class="row row-md" style="padding: 0; margin: 0;">
          <div class="col-md-12 masonry-item" style="padding: 0;">
            
            <div class="d-flex flex-column h-100" id="chat-list" data-plugin="chat">
              <!-- <div class="navbar white lt box-shadow d-flex">
                <span class="text-md text-ellipsis">与 繁华年间 聊天</span>
              </div> -->
              <div class="scrollable hover bg-light flex">
                <div class="p-3">
                  <div class="chat-list">
                    <div class="chat-item" data-class>
                      <a href="#" class="avatar w-40">
                        <img src="../assets/img/a2.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                          Hello
                        </div>
                        <div class="chat-content rounded msg">
                            What's up...
                        </div>
                        <div class="chat-date date">
                          2 days ago
                        </div>
                      </div>
                    </div>
                
                    <div class="chat-item" data-class="alt">
                      <a href="#" class="avatar w-40">
                        <img class="image" src="../assets/img/a0.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                          Hi, Garrett Winters...
                        </div>
                        <div class="chat-content rounded msg">
                         Nibh venenatis, cras ultrices sodales
                        </div>
                        <div class="chat-date date">
                          8 hrs ago
                        </div>
                      </div>
                    </div>
                
                    <div class="chat-item" data-class>
                      <a href="#" class="avatar w-40">
                        <img class="image" src="../assets/img/a2.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                          Volutpat adipiscing velit quisque eget orci
                        </div>
                        <div class="chat-date date">
                          2 hrs ago
                        </div>
                      </div>
                    </div>
                
                    <div class="chat-item" data-class="alt">
                      <a href="#" class="avatar w-40">
                        <img class="image" src="../assets/img/a0.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                          Sit morbi at amet, vulputate
                        </div>
                        <div class="chat-date date">
                          1 hr ago
                        </div>
                      </div>
                    </div>
                
                    <div class="chat-item" data-class>
                      <a href="#" class="avatar w-40">
                        <img class="image" src="../assets/img/a2.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                          Typing...
                        </div>
                        <div class="chat-date date">
                          Just now
                        </div>
                      </div>
                    </div>
                    
                  </div>
                  <div class="hide">
                    <div class="chat-item" id="chat-item" data-class>
                      <a href="#" class="avatar w-40">
                        <img class="image" src="../assets/img/a0.jpg" alt=".">
                      </a>
                      <div class="chat-body">
                        <div class="chat-content rounded msg">
                        </div>
                        <div class="chat-date date"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <form id="form">
                <div class="p-3 b-t mt-auto" id="chat-form">
                  <div class="toolbar mt-1">
                    <a href="javascript:;" id="face" class="text-muted mx-1 i-con-h-a">
                      <i class="i-con i-con-smile"><i></i></i>
                    </a>

                    <a href="javascript:;" id="filePicker" class="text-muted mx-1 i-con-h-a">
                      <i class="i-con i-con-photo"><i></i></i>
                    </a>
                    <div class="aui-chats-img">
                      <div id="uploader-demo">
                        <div id="fileList" class="uploader-list"></div>
                      </div>
                      <div id="show_img" style="display:none;">
                        <img id="thumb_img" src="" alt="图片" height="100px">
                      </div>
                    </div>

                    <a href="#" class="text-muted mx-1 i-con-h-a">
                      <i class="i-con i-con-video"><i></i></i>
                    </a>
                    <a href="#" class="text-muted mx-1 i-con-h-a">
                      <i class="i-con i-con-pin"><i></i></i>
                    </a>
                    <a href="#" class="text-muted mx-1 i-con-h-a">
                      <i class="i-con i-con-attachment"><i></i></i>
                    </a>
                  </div>

                  <div class="input-group">
                      <input type="text" class="form-control" placeholder="请输入"></input>
                      <span class="input-group-append">
                        <button class="btn btn-white" type="button">
                          <i class="i-con i-con-arrow-up text-success"></i>
                        </button>
                      </span>
                  </div>
                  
                </div>
              </form>


            </div>

          </div>

        </div>

      </div>
      <!-- ############ Main END-->
    </div>
    <!-- ############ Content END-->

  </div>
  <!-- ############ LAYOUT END-->


  <!-- build:js ../assets/js/site.min.js -->
  <!-- jQuery -->
  <script src="../libs/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../libs/popper.js/dist/umd/popper.min.js"></script>
  <script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- ajax page -->
  <script src="../libs/pace-progress/pace.min.js"></script>
  <script src="../libs/pjax/pjax.js"></script>
  <script src="../assets/js/ajax.js"></script>
  <!-- lazyload plugin -->
  <script src="../assets/js/lazyload.config.js"></script>
  <script src="../assets/js/lazyload.js"></script>
  <script src="../assets/js/plugin.js"></script>
  <!-- theme -->
  <script src="../assets/js/theme.js"></script>
  <!-- endbuild -->
  <link rel="stylesheet" href="../assets/plus/jquery-sina-emotion/src/jquery-sina-emotion.css"/>
  <script src="../assets/plus/jquery-sina-emotion/src/jquery-sina-emotion.js"></script>
</body>

<script type="text/javascript">

  $(function() {
    //点击发表情
    $('#face').bind({
      click: function (event) {
        if (!$('#sinaEmotion').is(':visible')) {
          $(this).sinaEmotion();
          event.stopPropagation();
        }
      }
    });
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-57981079-1');
    gtag('event', 'pv', {
        event_category: 'jquery-sina-emotion'
    });

    //键盘自动缩放
    $('input').on('blur',function(){
      setTimeout(function(){
        window.scrollTo(0, 0);
      }, 100);
    });

  });
</script>

</html>
